// canvas-components/bar/index.js

import * as echarts from '../../ec-canvas/echarts.min.js';

function setOption(option) {
    return option = {
        // title: {
        //     text: '测试下面legend的红色区域不应被裁剪',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'axis',
            // backgroundColor: 'rgba(0,0,0,.6)',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: option.color,
        // ['#6794de', '#62c7c9'],
        legend: option.legend,
        // {
        //     data: ['个人', '商户'],
        //     bottom: 15,
        //     left: 'center',
        //     // backgroundColor: 'red',
        //     z: 100
        // },
        grid: {
            left: '5%',
            top: 20,
            right: '5%',
            bottom: 45,
            containLabel: true
        },
        xAxis: option.xAxis,
        // {
        //     type: 'category',
        //     axisLabel: {
        //         color: 'rgba(255, 255, 255, 0.8)',
        //         fontSize: 14,
        //         interval: 0,
        //     },
        //     axisLine: {
        //         show: true,
        //         lineStyle: {
        //             color: '#d4d4d3'
        //         }
        //     },
        //     axisTick: {
        //         show: false,
        //     },
        //     splitLine: {
        //         show: false,
        //         lineStyle: {
        //             color: '#2D4377',
        //             type: "dotted",
        //         }
        //     },
        //     boundaryGap: true,
        //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        // },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: ['#d4d4d3']
                }
            }
        },
        series: option.series,
        // [
        //     {
        //         name: '个人',
        //         type: 'bar',
        //         // barWidth: 15,
        //         barGap: '0%',
        //         itemStyle: {
        //             // borderWidth: 1,
        //             borderRadius: [0, 0, 0, 0],
        //             color: '#6794de',
        //             // {
        //             //     type: 'linear',
        //             //     x: 0,
        //             //     y: 0,
        //             //     x2: 0,
        //             //     y2: 1,
        //             //     colorStops: [{
        //             //         offset: 0, color: '#A5ADFF' // 0% 处的颜色
        //             //     }, {
        //             //         offset: 1, color: '#9B69EC' // 100% 处的颜色
        //             //     }]
        //             // }
        //         },
        //         data: [87, 60, 124, 20, 432, 90, 66]
        //     }, {
        //         name: '商户',
        //         type: 'bar',
        //         // barWidth: 2,
        //         barGap: '0%',
        //         itemStyle: {
        //             borderWidth: 1,
        //             borderRadius: [0, 0, 0, 0],
        //             color: '#62c7c9'
        //             // {
        //             //     type: 'linear',
        //             //     x: 0,
        //             //     y: 0,
        //             //     x2: 0,
        //             //     y2: 1,
        //             //     colorStops: [{
        //             //         offset: 0, color: '#E1B031' // 0% 处的颜色
        //             //     }, {
        //             //         offset: 1, color: '#FF8143' // 100% 处的颜色
        //             //     }]
        //             // }
        //         },
        //         data: [90, 66, 174, 100, 430, 87, 60]
        //     }
        // ]
    };
}
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        id: {
            type: String,
            value: "chart-dom-bar"
        },
        canvasId: {
            type: String,
            value: "chart-bar"
        },
        width: {
            type: String,
            value: "750rpx"
        },
        height: {
            type: String,
            value: "500rpx"
        },
        option: {
            type: Object,
            value() {
                return {}
            }
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true,
        }
    },

    observers: {
        'option': function (value) {
            if(value){
                // this.oneComponent = this.selectComponent('#'+this.data.id);
                console.log(this.oneComponent)
                this.initChart()
            }
        },
    },

    lifetimes: {
        // // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        // attached: function () { 
            
        // },
        ready: function () {
            this.oneComponent = this.selectComponent('#'+this.data.id); 
            console.log(this.oneComponent)
            console.log("BAR!!!!!!!")
            // this.initChart()
        },
        // moved: function () { 
        //     //console.log("moved")
        // },
        detached: function () { 
            // this.setData({
            //     ec: {
            //         onInit: null
            //     }
            // })
            // console.log("detached")
            // console.log(this.lazyChart)
            // this.lazyChart.dispose();
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        initChart() {
            if(this.oneComponent){
                this.oneComponent.init((canvas, width, height) => {
                    const chart = echarts.init(canvas, null, {
                        width: width,
                        height: height
                    });
                    console.log(this.data.option)
                    // setOption(chart, this.data.option)
                    // echarts转图片
                    // chart.on('finished', () => {
                    //     this.oneComponent.canvasToTempFilePath({
                    //         success: res => {
                    //             console.log(res)
                    //             this.setData({
                    //                 echartImgSrc: res.tempFilePath
                    //             })
                    //         },
                    //         fail: res => console.log('转换图片失败', res)
                    //     })
                    // })
                    this.lazyChart = chart;
                    chart.setOption(setOption(this.data.option), true);
                    return chart;
                });
            }else{
                this.oneComponent = this.selectComponent('#'+this.data.id);
                this.initChart()
            }
        }
    }
})